<template>
  <div class="content">
    <div class="title">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="titleItem">
            <!--suppress HtmlUnknownTarget -->
            <img alt="" :src="IconMan" draggable="false"/>
            <span>男装/女装/童装/内衣</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="titleItem">
            <!--suppress HtmlUnknownTarget -->
            <img alt="" :src="IconWoman" draggable="false"/>
            <span>女鞋/箱包/钟表/珠宝</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="titleItem">
            <!--suppress HtmlUnknownTarget -->
            <img alt="" :src="IconKid" draggable="false"/>
            <span>美妆/个护清洁/宠物</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="titleItem">
            <!--suppress HtmlUnknownTarget -->
            <img alt="" :src="IconHome" draggable="false"/>
            <span>家居/家具/家装/厨具</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content-content">
      <el-row :gutter="10">
        <el-col :span="6">
          <ul>
            <li v-for="item in list1" :key="item.id" @click="toSearch(item)">{{item.name}}</li>
          </ul>
        </el-col>
        <el-col :span="6">
          <ul>
            <li v-for="item in list2" :key="item.id" @click="toSearch(item)">{{item.name}}</li>
          </ul>
        </el-col>
        <el-col :span="6">
          <ul>
            <li v-for="item in list3" :key="item.id" @click="toSearch(item)">{{item.name}}</li>
          </ul>
        </el-col>
        <el-col :span="6">
          <ul>
            <li v-for="item in list4" :key="item.id" @click="toSearch(item)">{{item.name}}</li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import IconMan from '@/assets/img/icons/man.svg'
import IconWoman from '@/assets/img/icons/woman.svg'
import IconKid from '@/assets/img/icons/kid.svg'
import IconHome from '@/assets/img/icons/home-dec.svg'
import { queryChildrenByParentId } from '@/api/ApiSysGoodCategory'
import { ResultCode } from '@/constants/constants'
export default {
  name: 'XumGoodCategory',
  data () {
    return {
      IconMan,
      IconWoman,
      IconKid,
      IconHome,
      list1: [],
      list2: [],
      list3: [],
      list4: []
    }
  },
  methods: {
    toSearch (item) {
      this.$router.push('/shopList/type/' + item.name)
    },
    convertData (data) {
      return data
    },
    queryData (id, propertiesName) {
      const vm = this
      queryChildrenByParentId(id, false, data => {
        if (data && data.code === ResultCode.OK) {
          const lis = data.object
          if (lis && typeof lis === 'object') {
            const list = []
            lis.forEach(item => {
              list.push(vm.convertData(item))
            })
            vm[propertiesName] = list
          }
        }
      })
    }
  },
  mounted () {
    // 男装/女装/童装/内衣
    this.queryData(105, 'list1')
    // 女鞋/箱包/钟表/珠宝
    this.queryData(107, 'list2')
    // 美妆/个护清洁/宠物
    this.queryData(106, 'list3')
    // 家居/家具/家装/厨具
    this.queryData(104, 'list4')
  }
}
</script>

<style lang="scss" scoped>

  .content {
    user-select: none;
    margin: 60px auto 30px;
    max-width: 1000px;
    height: 100px;
    align-content: center;
    text-align: center;

    .title {

      .titleItem {

        img {
          display: inline-block;
          height: 70px;
          cursor: pointer;
        }

        span {
          display: inline-block;
          font-weight: 600;
          cursor: pointer;
          transition: color .2s;
        }

        span:hover {
          color: orangered;
        }

      }

    }

    .content-content {
      margin-top: 30px;

      ul {
        display: block;
        list-style: none;
        width: 100%;
        border-right: 2px solid #777777;

        li {
          cursor: pointer;
          display: block;
          margin: 14px 8px;
          color: #777777;
          transition: color .2s;
        }

        li:hover {
          color: #333333;
        }

      }

    }

  }

</style>
